<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { VxeUI } from 'vxe-table'
import type { VxeTablePropTypes, VxeTableEvents } from 'vxe-table'
import axios from 'axios'
import CustomTable from '@/components/customTable'
import type { CustomTableProps } from '@/components'
import { isArray, isObject, orderBy } from '@/utils'

interface Row {
  id: number
  name: string
  buyPrice: number
  riseAndFall: number
  child: {
    name: string
    age: number
  }
}

const loading = ref(false)

const tableData1 = ref<Row[]>([])

const tableData2 = ref<Row[]>([])

const tableData3 = ref<Row[]>([])

onMounted(() => {
  loading.value = true
  axios
    .get('/api/getTable1')
    .then((res) => {
      tableData1.value = res?.data?.data
    })
    .finally(() => {
      loading.value = false
    })
})

// const columnConfig = computed(() => {
//   return {
//     renderCell: (h: any, params: any) => {
//       console.log('params', params)
//       const { column, row } = params
//       if (column.field === 'name' && row.child && row.child.length) {
//         column.type = 'expand'
//       } else {
//         column.type = 'text'
//       }
//       return h('span', row[column.field])
//     },
//   }
// })

const menuConfig: VxeTablePropTypes.MenuConfig = {
  body: {
    options: [
      [
        { code: 'copy', name: '复制' },
        { code: 'delete', name: '删除' },
      ],
    ],
  },
}

const menuClickHandle: VxeTableEvents.MenuClick<Row> = async ({ menu, row }) => {
  switch (menu.code) {
    case 'copy':
      await navigator.clipboard.writeText(
        `${row.name}最近买入价格为${row.buyPrice}万元，最近涨幅${row.riseAndFall}%`,
      )
      VxeUI.modal.message({
        content: '复制成功',
      })
      break
    case 'delete':
      VxeUI.modal.confirm({
        title: '删除确认',
        content: '删除后不可恢复，确定要删除吗？',
        onConfirm: () => {
          const index = tableData1.value.findIndex((item: Row) => item.id === row.id)
          tableData1.value.splice(index, 1)
        },
      })
      break
  }
}

const onSortChange: VxeTableEvents.SortChange<Row> = ({ field, order }) => {
  console.log('field, order', field, order)
  loading.value = true
  return new Promise<Row[]>((resolve) => {
    setTimeout(() => {
      loading.value = false
      const list = tableData1.value.slice()
      if (field && order) {
        const res = orderBy(list, { field, order })
        tableData1.value = res
        resolve(res)
      } else {
        tableData1.value = list
        resolve(list)
      }
    }, 1000)
  })
}

const loadConfig: CustomTableProps['loadConfig'] = {
  url: '/api/getTable1',
  method: 'get',
  formatRes: (res: unknown) => {
    console.log('00', res)
    if (isObject(res) && isObject(res.data) && isArray(res.data.data)) {
      return res.data.data
    }
    return []
  },
}
</script>

<template>
  <div class="about">
    <vxe-tabs padding :style="{ width: '100%' }">
      <vxe-tab-pane title="成交排名" name="1">
        <!-- <vxe-table
          :border="true"
          :loading="loading"
          :data="tableData1"
          :menu-config="menuConfig"
          @menu-click="menuClickHandle"
          :sort-config="{ remote: true }"
          @sort-change="onSortChange"
        >
          <vxe-column type="seq" width="70"></vxe-column>
          <vxe-column field="name" title="机构" type="expand">
            <template #default="{ row }">
              <vxe-tag :status="row.status" :content="row.tagName"></vxe-tag>
              {{ row.name }}
            </template>
            <template #content="{ row }">
              <vxe-table :data="row.child" height="200">
                <vxe-column field="name" title="姓名"></vxe-column>
                <vxe-column field="sex" title="性别"></vxe-column>
                <vxe-column field="age" title="年龄"></vxe-column>
              </vxe-table>
            </template>
          </vxe-column>
          <vxe-column field="buyPrice" title="买入" sortable></vxe-column>
          <vxe-column field="riseAndFall" title="涨跌bp" sortable></vxe-column>
        </vxe-table> -->
        <CustomTable lazy :loadConfig="loadConfig" />
      </vxe-tab-pane>
      <vxe-tab-pane title="成交明细" name="2">
        <vxe-table :border="true" :data="tableData2">
          <vxe-column type="checkbox" width="70"></vxe-column>
          <vxe-column field="role" title="Role"></vxe-column>
          <vxe-column field="address" title="Address"></vxe-column>
        </vxe-table>
      </vxe-tab-pane>
      <vxe-tab-pane title="偏离监控" name="3">
        <vxe-table :border="true" :data="tableData3">
          <vxe-column type="radio" width="70"></vxe-column>
          <vxe-column field="name" title="Name"></vxe-column>
          <vxe-column field="age" title="Age"></vxe-column>
          <vxe-column field="address" title="Address"></vxe-column>
        </vxe-table>
      </vxe-tab-pane>
    </vxe-tabs>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    flex: 1;
    /* align-items: center; */
  }
}
</style>
